<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast</title>
  <link rel=" stylesheet" href="../js/umi.css">
  <script src=" ../reactjs/react.development.js">
  </script>
  <script src="../reactjs/react-dom.development.js"></script>
  <script src=" https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script src="../reactjs/prop-types.js"></script>
  <script src=" ../js/umi.js"></script>
  <style>
    .btn {
      background-color: #2dc3e8;
      color: #fff;
      padding: 8px 15px;
      font-size: 14px;
      border-radius: 4px;
      border: 0;
      cursor: pointer;
      margin: 0 10px 10px 0;
    }
  </style>
</head>

<body style="text-align: center;padding-top:20px;">
  <div id="app">
  </div>
</body>
<script type="text/babel">
  var lanliUiNew = window.LanLIUI
  class App extends React.Component {
    state = {
      toastindex: null
    }
    open1() {
      lanliUiNew.Toast.show({
        message: "你好",
      })
    }

    open2() {
      lanliUiNew.Toast.show({
        message: "此toast需要5秒后关闭",
        duration: 5000
      })
    }
    open3() {
      const toastindex = lanliUiNew.Toast.show({
        type: 'loading',
        message: "此toast需要手动关闭哦",
      })

      this.setState({ toastindex })
    }
    close3() {
      lanliUiNew.Toast.close(this.state.toastindex)
    }
    open4() {
      lanliUiNew.Toast.show({
        message: "你好",
        shade: true
      })
    }

    render() {
      return (
        <div>
          <button className="btn" onClick={() => { this.open1('center') }}>普通使用</button><br />
          <button className="btn" onClick={() => { this.open2() }}>5秒后关闭</button><br />
          <button className="btn" onClick={() => { this.open3() }}>你好</button>
          <button className="btn" onClick={() => { this.close3() }}>手动关闭</button><br />
          <button className="btn" onClick={() => { this.open4() }}>加上mask层</button><br />
        </div >
      )
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));
</script>

</html>